<template>
  <!-- 查看详情信息 -->
  <div class="dialog">
    <el-dialog
      :visible="dialogFormVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      width="720px"
    >
      <!-- 对话框头部 -->
      <div
        slot="title"
        class="header-title"
        style="background-color: #409eff; color: #fff"
      >
        <div style="padding: 15px 20px">{{ dialogHeaderName }}</div>
      </div>

      <!-- 课题详情 -->
      <DialogTopicForm
        v-if="dialogTopicForm"
        :messages="messages"
        :changeInput="changeInput"
      />

      <!-- 审核信息 -->
      <DialogReviewed v-if="dialogReviewed" />

      <!-- 课题名称修改 -->
      <DialogTopicNameChange
        v-if="dialogTopicNameChange"
        :messages="messages"
      />

      <!-- 对话框表格信息 -->
      <!-- 对话框表单 -->
      <DialogTable v-if="dialogTable" />

      <!-- 对话框尾部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DialogTopicForm from './DialogClassify/DialogTopicForm.vue';
import DialogReviewed from './DialogClassify/DialogReviewed.vue';
import DialogTopicNameChange from './DialogClassify/DialogTopicNameChange.vue';
import DialogTable from './DialogClassify/DialogTable.vue';

export default {
  props: [
    'messages',
    'dialogHeaderName',
    'dialogTopicForm',
    'dialogFormVisible',
    'dialogReviewed',
    'dialogTopicNameChange',
    'dialogTable',
    'changeInput',
  ],
  components: {
    DialogTopicForm,
    DialogReviewed,
    DialogTopicNameChange,
    DialogTable,
  },

  data() {
    return {};
  },

  methods: {
    closeDialog() {
      this.$emit('closeDialogFormVisible');
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  ::v-deep .el-dialog__wrapper {
    // eslint-disable-line
    .el-dialog {
      .el-dialog__body {
        padding: 0px;
      }
      .el-dialog__header {
        padding: 0px;
        margin-bottom: 20px;
      }
      .el-dialog__headerbtn {
        top: 5px;
        right: 5px;
        padding-top: 10px;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
        height: 30px;
        width: 35px;
      }
      .el-dialog__headerbtn .el-dialog__close:hover {
        color: gray;
      }
    }
  }
}
</style>
